<%--
  Created by IntelliJ IDEA.
  User: MSI
  Date: 2022/5/7
  Time: 9:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台登录-X-admin2.0</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>

</head>
<body class="login-bg">

<div class="login">
    <div class="message">xx系统-管理登录</div>
    <div id="darkbannerwrap"></div>

    <form method="post" class="layui-form">
        <input name="userName" id="userName" placeholder="用户名" type="text" lay-verify="required"
               class="layui-input">
        <hr class="hr15">
        <input name="userPwd" id="userPwd" lay-verify="required" placeholder="密码" type="password"
               class="layui-input">
        <tr>
            <td><input name="code" id="code" lay-verify="required" placeholder="请输入验证码" type="text"
                class="layui-input">
            <td>
                <a href="javascript:void(0);" title="点击更换验证码">
                    <img id="imgVerify" src="/getVerify" alt="更换验证码" height="36" width="100px" onclick="getVerify(this);">
                </a>
            </td>
        </tr>
        <hr class="hr15">
        <input type="checkbox" id="reName" lay-filter='reName'>记住用户名
        <input type="checkbox" id="rePwd"  lay-filter='rePwd'>记住密码
        <hr class="hr15">
        <input value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
        <hr class="hr20">
    </form>


</div>

<script>
    $(function() {
        layui.use('form', function() {
            var form = layui.form;

            //监听提交
            form.on('submit(login)', function(data) {
                // alert(888)
                $.ajax({
                    url:"/userAjax/login",
                    type:"post",
                    contentType:"application/x-www-form-urlencoded",
                    data:data.field,
                    success:function (rs){
                        layer.msg(rs.info,function (){
                            if (rs.success){
                                window.location.href="/index";
                            }
                        });

                    }
                })
                return false;
            });

            //记住用户名选中监听事件(layui版本)
            form.on('checkbox(reName)', function(data) { //reName 为复选框id
                //判断是否选中，data.elem.checked = true 选中
                if (data.elem.checked) {
                    //获取用户号
                    var userName = $("#userName").val();
                    //记录本地存储对象中
                    localStorage.setItem("name", userName);
                } else {
                    //取消选中，删除本地存储中建名name的值
                    localStorage.removeItem("name")
                }
            })

            //记住密码选中监听事件(layui版本)
            form.on('checkbox(rePwd)', function(data) { //rePwd 为复选框id
                //判断是否选中，data.elem.checked = true 选中
                if (data.elem.checked) {
                    //获取用户密码
                    var userPwd = $("#userPwd").val();
                    //记录本地存储对象中
                    localStorage.setItem("pwd", userPwd);
                } else {
                    //取消选中，删除本地存储中建名pwd的值
                    localStorage.removeItem("pwd")
                }
            })

        });


        //加载本地存储信息
        loadInfo();
    })
    //刷新验证码
    function getVerify(obj) {
        obj.src = "/getVerify?" + Math.random();
    }

    //加载本地存储信息
    function loadInfo() {
        //读取本地存储用户名和密码信息
        var name = localStorage.getItem("name");
        var pwd = localStorage.getItem("pwd");

        if (name) {
            $("#userName").val(name);
            //设置记住用户名选中状态
            $("#reName").prop("checked", true);
        }
        if (pwd) {
            $("#userPwd").val(pwd);
            //设置记住密码选中状态
            $("#rePwd").prop("checked", true);
        }

    }
</script>

</body>
</html>